<template>
  <div class="" style="background: #000">
    <!-- 背景插件 -->
     <vue-particles
        color="#fff"
        :particleOpacity="0.7"
        :particlesNumber="60"
        shapeType="circle"
        :particleSize="4"
        linesColor="#fff"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="2"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
        class="lizi"
      >
      </vue-particles>
    <div class="content">
    <h1>管理员信息</h1>
    <div class="">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="姓名" style="width: 300px">
          <el-input v-model="formInline.user" placeholder="姓名" class="myClassInput"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="密码" style="width: 300px">
          <el-input v-model="formInline.region" placeholder="密码" class="myClassInput"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="exit" @click.prevent="exit()">
      <router-link tag="el-button" type="danger" to="/" class="myClassInput">退出登录</router-link>
    </div>
  </div>
  </div>
</template>

<script>
import axios from 'axios'
import Qs from 'qs'
export default {
  name: 'setting',
  data() {
    return {
      formInline: {
        user: 'root',
        region: '10B509'
      }
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!')
    },
    exit() {
      axios.post('/api/logout').then((res) => {
        console.log('退出',res.data)
      })
    }
  }
}
</script>

<style lang="">
  .myClassInput .el-input__inner {
    background-color: transparent  !important;
    color: #fff;
  }
  .myClassInput.el-button {
    background-color: transparent  !important;
    color: #fff;
  }
</style>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.content{
  width: 30%;
  height: 300px;
  position: absolute;
  background-color: transparent;
  top: 150px;
  left: 620px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0px 0px 12px #ccc;
  h1 {
    text-align: center;
    font-weight: bold;
    font-size: 30px;
    margin-bottom: 30px;
    margin-left: 20px;
    color: #fff
  }
  .exit{
    margin-bottom: -10px;
    margin-left: 20px;
  }
}
.lizi {
  background: #000;
  height: 700px !important;
}
</style>
